<template>
 <transition name="slide">
    <div :class="['message',type]" :style="{'justify-content': center?'center':''}" v-if="visible">
      <i :class="['el-message__icon', 'el-icon-'+type]"></i>
      <p>{{message}}</p>
    </div>
 </transition>
</template>

<script>

export default {
  name: 'co-message',
  data() {
    return {
      visible: true,
    };
  },
  methods: {
    show() {
      // console.log(this.type);
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
  },
  mounted() {
    setTimeout(() => {
      this.hide();
    }, this.duration || 3000);
  },
  // 11个传参方式
};
</script>

<style scoped>
.message{
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin:10px auto;
  width:400px;
  height:50px;
  line-height:50px;
  font-size: 14px;
  text-align: center;
  border-radius:2px;
  color: white;
  top:40px;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:999;
}
.slide-enter,
.slide-leave-to{
  transform: translate(-50%,-170%);
}
.slide-enter-to,
.slide-leave{
   transform: translate(-50%,0%);
}
.slide-enter-active,
.slide-leave-active{
  transition:all 1s ease-in-out -.1s;
}
.success{
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color:#67c23a;
}
.error{
  color:#f56c6c;
  background-color: #fef0f0;
  border-color: #fde2e2;
}
</style>
